<script setup>
import { userInfoStore } from '/store';
import { http } from '/api/request.js';

const userStore = userInfoStore();
const loginChange = ref(false);
const changeLogin = () => {
    loginChange.value = !loginChange.value;
};
const login = (name, password) => {
    // todo 需要向服务端发送登录请求，结果返回成功后，才能缓存到本地。
    userStore.setUserInfo(name, password);
    //返回，并自动刷新页面
    uni.navigateBack();
};
// 拿到code，请求后台接口，获取opneId
const getData = async (loginAuth) => {
    console.log(loginAuth.code)
    let res = await http({
        url: '/user/getOpenId?code=' + loginAuth.code,
        method: 'GET'
    });
    userInfo.value.openId = res;
};

const wxLogin = () => {
    uni.showModal({
        mask: true,
        title: '提示',
        content: '授权微信登录后，才能正常使用小程序功能',
        success(res) {
            if (res.confirm) {
                // 点击了确认按钮， 
                // #ifdef MP-WEIXIN
                // 只在微信小程序中，才能用getUserProfile接口。K
                uni.getUserProfile({
                    desc: '获取你的昵称，头像',
                    success(userRes) {
                         console.log("getUserProfile=====success");
                        if (userRes.userInfo != undefined) {
                            userInfo.value = userRes.userInfo;
                            console.log(userInfo.value);
                            //调用后台接口，获取openId,才能WX中的用户书。
                            uni.login({
                                provider: 'weixin',
                                success(loginAuth) {
                                    getData(loginAuth);
                                }
                            });
                        } else {
                            uni.showToast({
                                icon: 'none',
                                title: '获取失败,请重试'
                            });
                        }
                    }
                });
                // #endif
            }
        }
    });
};
</script>
<template>
    <view class="viewport">
        <view class="logo">
            <image src="/static/images/logo_icon.png"></image>
        </view>
        <!--       <view class="img">
          <image :src="userInfo.avatarUrl"></image>
        </view>
        <view class="nickname">
          <text>{{ userInfo.nickName }}</text>
        </view> -->
        <view class="login">
            <!-- H5表单登录 -->
            <view v-if="loginChange">
                <input class="input" type="text" placeholder="请输入用户名/手机号" />
                <input class="input" type="text" placeholder="请输入密码" />
                <button class="button phone" @tap="login('bright', '111')">登录</button>
            </view>
            <!-- 小程序端授权登录 -->
            <view v-else>
                <button class="button phone" @tap="wxLogin">
                    <text class="icon-weixin"></text>
                    微信授权登录
                </button>
            </view>
            <view class="extra">
                <view class="caption">
                    <text>其它登录方式</text>
                </view>
                <view class="options">
                    <button size="mini" class="btn" @tap="changeLogin()">{{ loginChange ? '微信登录' : '账号登录' }}</button>
                </view>
                <view class="tips">登录/注册即视为你同意服务条款和XX隐私协议</view>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
page {
    height: 100%;
}
.viewport {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20rpx 40rpx;
}
.logo {
    flex: 1;
    text-align: center;
    image {
        width: 220rpx;
        height: 220rpx;
        margin-top: 15vh;
    }
}
.login {
    display: flex;
    flex-direction: column;
    height: 60vh;
    padding: 40rpx 20rpx 20rpx;
    .input {
        width: 100%;
        height: 80rpx;
        font-size: 28rpx;
        border-radius: 72rpx;
        border: 1px solid #ddd;
        padding-left: 30rpx;
        margin-bottom: 20rpx;
    }
    .button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 80rpx;
        font-size: 28rpx;
        border-radius: 72rpx;
        color: #fff;
        .icon {
            font-size: 40rpx;
            margin: 0 6rpx;
            padding: 0 10rpx;
            background-color: #06c05f;
        }
    }
    .phone {
        background-color: $uni-color-primary;
    }
    .extra {
        flex: 1;
        padding: 70rpx 70rpx 0;
        .caption {
            width: 440rpx;
            line-height: 1;
            border-top: 1rpx solid #ddd;
            font-size: 26rpx;
            color: #999;
            position: relative;
            text {
                transform: translate(-40%);
                background-color: #fff;
                position: absolute;
                top: -12rpx;
                left: 50%;
            }
        }
        .options {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 70rpx;
            .btn {
                padding: 0 20rpx;
                background-color: transparent;
                color: #28bb9c;
                border: 1px solid #28bb9c;
            }
        }
    }
}
.tips {
    position: absolute;
    bottom: 80rpx;
    left: 20rpx;
    right: 20rpx;
    font-size: 22rpx;
    color: #999;
    text-align: center;
}
</style>
